<template>
    <div
        class="divider-line-page"
        :class="'divider-line-page-' + props.placement"
    >
        <div class="divider-line-page-ll"></div>
        <div class="divider-line-page-tt">
            <slot />
        </div>
        <div class="divider-line-page-rr"></div>
    </div>
</template>
<script setup>

const props = defineProps({
    placement: {
        type: String,
        default: () => "center",
    },
});
</script>
<style lang="less" scoped>
.divider-line-page {
    margin: 10px 0;
    display: flex;
    align-items: center;
    .divider-line-page-ll,
    .divider-line-page-rr {
        position: relative;
        &::after {
            content: "";
            position: absolute;
            height: 1px;
            width: 100%;
            top: 50%;
            left: 0;
            transform: scaleY(0.5);
            background: var(--border-color);
        }
    }
    .divider-line-page-ll {
        flex: 1;
    }
    .divider-line-page-rr {
        flex: 1;
    }
    .divider-line-page-tt {
        margin: 0 8px;
        white-space: nowrap;
        color: var(--text-color-base-2);
    }
    &.divider-line-page-left {
        .divider-line-page-rr {
            flex: 1;
        }
        .divider-line-page-ll {
            width: 28px;
            min-width: 28px;
        }
    }
    &.divider-line-page-right {
        .divider-line-page-ll {
            flex: 1;
        }
        .divider-line-page-rr {
            width: 28px;
            min-width: 28px;
        }
    }
}
</style>
